<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期加载数据案例</title>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    <script src="js/jquery.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:'#mydiv',
                data:{
                    foods:[]
                },
                methods:{
                    show(){
                        this.foods = [{},{}]
                    }
                },
                //当Vue实例挂载结束后，加载远程数据设置Data属性
                mounted(){
                    //ES5的语法
                //    var _this = this
                //    $.getJSON('foods.json',function(result){
                //         console.log(result.shuancai)
                //         _this.foods = result.shuancai
                //    })
                    //ES6的语法
                     $.getJSON('foods.json',result => {
                        this.foods = result.shuancai
                   })
                },
            })
        }
    </script>
    <style>
        ul{list-style:none;}
        li{
            width: 300px;
            height: 350px;
            float:left;
            border:1px solid #ccc;
            padding:10px;
            margin:10px;
        }
        img{
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="mydiv">
        <ul>
            <li v-for="(food,index) in foods">
                <img :src="food.image" alt="">
                <span>编号:{{index+1}}</span>
                <h3>名称：{{food.name}}</h3>
                <h3>加工方法：{{food.way}}</h3>
            </li>
        </ul>
    </div>
</body>
</html>